<template>
	<view class="main">

		<view class="mv">
			<view class="md">
				<view class="mdi">
					<img :style="{backgroundColor:doctorInfo.img?'':'#eee'}"
						:src="doctorInfo.img||'https://www.ysrs.xyz/apiI/ll/file/preview/1743090725920ff80808195d597d90195d84db4200013.png'" />
				</view>
				<view class="mdr">
					<view class="mdrt">{{doctorInfo.name}}<text>{{doctorInfo.zhicheng}}</text></view>
					<view class="mdrb">{{doctorInfo.keshi}}</view>
				</view>
			</view>
		</view>

		<view class="mv">
			<view class="mu">
				<view class="mt">
					<view class="mtc">预约信息</view>
				</view>
				<view class="muis">
					<view class="mui">
						<view class="muil muila"><uv-icon name="calendar" color="#2c9b94" size="24" />预约日期:</view>
						<view class="muic">{{$moment().format('YYYY-')}}{{dateInfo.name}} {{dateInfo.week}}</view>
					</view>
					<view class="mui">
						<view class="muil"><uv-icon name="clock" color="#2c9b94" size="20" />预约时段:</view>
						<view class="muic">{{timeInfo.time}}</view>
					</view>
				</view>
				<view class="mk">* 请注意预约就诊时间段！</view>
			</view>
		</view>

		<view class="mv">
			<view class="mu">
				<view class="mt">
					<view class="mtc">就诊人</view>
					<view class="mtr" @click="openAddPatient"><uv-icon name="plus-circle" color="#2c9b94" size="18" />
						添加就诊人</view>
				</view>
				<view class="muif" style="background-color: #909399;" v-if="!patientList||!patientList.length">
					<view class="muifi" style="width: 600rpx;text-align: center;">请添加就诊人</view>
				</view>
				<view class="muif" style="background-color: #E6A23C;" v-else-if="!patientInfo||!patientInfo.id">
					<view class="muifi" style="width: 600rpx;text-align: center;">请选择就诊人</view>
				</view>
				<view class="muif" @click="openPatient" v-else>
					<view class="muifi">{{patientInfo.name}}</view>
					<view class="muifi">{{patientInfo.sex == 1 ? '男' :'女'}}</view>
					<view class="muifi">{{patientInfo.idCard}}</view>
					<view class="muifib">
						<uv-icon name="play-right-fill" color="#fff" size="18"></uv-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="mv">
			<view class="mu">
				<view class="mt">
					<view class="mtc">费用信息</view>
				</view>
				<view class="muis">
					<view class="mui">
						<view class="muil"><img
								src="https://www.ysrs.xyz/apiI/ll/file/preview/1743217651017ff80808195d597d90195dfde6d490015.png" />就诊费用:
						</view>
						<view class="muic" v-if="mainType == 2"><text>￥{{(doctorInfo.price).toFixed(2)}} </text> 元</view>
						<view class="muic" v-else>就诊时支付</view>
					</view>
					<view class="mui" v-if="mainType == 2">
						<view class="muil muila"><img
								src="https://www.ysrs.xyz/apiI/ll/file/preview/1743217621083ff80808195d597d90195dfddf85b0014.png" />支付方式:
						</view>
						<view class="muic"><img
								src="https://www.ysrs.xyz/apiI/ll/file/preview/1743217732405ff80808195d597d90195dfdfab350016.png" />微信支付
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="sub" v-if="mainType == 1" @click="openRecord">
			<view class="subb">挂号</view>
		</view>

		<view class="sub" v-else>
			<view class="subl">
				总计：<text>￥ {{(doctorInfo.price).toFixed(2)}} 元</text>
			</view>
			<uv-button @click="pay" type="primary" text="立即支付"></uv-button>
		</view>

		<uv-modal ref="submodal" title="预约挂号"
			:content='`您正在预约的是${doctorInfo.keshi} / ${doctorInfo.zhicheng} / ${doctorInfo.name} / ${dateInfo.name} / ${dateInfo.week} / ${timeInfo.time};就诊人为 ${patientInfo.name} / ${patientInfo.idCard} 的就诊号`'
			:closeOnClickOverlay="false" :showCancelButton="true" @confirm="confirmSub" confirmText='确认预约'></uv-modal>
		<uv-picker ref="picker" :columns="columns" keyName="label" @confirm="confirmpicker"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateInfo: {},
				timeInfo: {},
				doctorInfo: {},
				patientList: [],
				patientInfo: {},
				columns: [
					[]
				],
				mainType: null,
			}
		},
		onLoad(o) {
			this.timeInfo = JSON.parse(o.time)
			this.dateInfo = JSON.parse(o.date)
			this.mainType = o.type
			this.doctorInfo = JSON.parse(o.doctorInfo)
			this.getPatient()
		},
		methods: {
			openRecord() {
				this.$refs.submodal.open()
			},
			confirmSub() {
				uni.reLaunch({
					url: '/pages/personal/registrationRecoed'
				})
			},
			pay() {},
			openPatient() {
				this.$refs.picker.open();
			},
			confirmpicker(e) {
				this.patientInfo = e.value[0]
			},
			getPatient() {
				this.patientList = [{
						name: '张三三三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 11,
						isBind: true
					},
					{
						name: '李四三',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 12
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 123
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 113
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 143
					},
					{
						name: '王三五',
						idCard: '371102199903051154',
						sex: 1,
						cardNo: '202503250012',
						phone: 13322332233,
						id: 134
					},
				]
				this.patientList.map(i => {
					this.columns[0].push({
						label: `${i.name} ${i.sex == 1 ?'男' :''} ${i.idCard}`,
						...i
					})
				})
				this.patientInfo = this.patientList.find(i => i.isBind) || {}
			},
			openAddPatient() {
				uni.navigateTo({
					url: '/pages/AddPatient/AddPatient'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		min-height: 100vh;
		padding: 20rpx;
		background: linear-gradient(to bottom, #12acee22, #2c9b9422);
	}

	.mv {
		margin: 20rpx 30rpx 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
	}

	.md {
		display: flex;
		align-items: center;

		.mdi {
			background-color: #fff;
			border-radius: 50%;
			padding: 6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 30rpx;

			img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 22rpx;
				border-radius: 50%;
			}
		}

		.mdr {
			.mdrt {
				font-weight: bold;
				margin-bottom: 20rpx;

				text {
					font-weight: normal;
					display: inline-block;
					margin-left: 20rpx;
					color: #666;
				}
			}

			.mdrb {
				color: #444;
			}
		}

	}

	.mu {

		.muis {
			margin-top: 10rpx;

			.mui {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;

				&:last-of-type {
					border: 0;
				}

				.muil {
					display: flex;
					align-items: center;
					width: 240rpx;

					/deep/text {
						display: inline-block;
						margin-right: 20rpx;
					}

					img {
						width: 42rpx;
						margin-right: 20rpx;
						height: 42rpx;
					}
				}

				.muila {
					/deep/text {
						margin-left: -7rpx;
					}

					img {
						width: 52rpx;
						margin-right: 10rpx;
						height: 52rpx;
						margin-left: -3rpx;
					}
				}

				.muic {
					display: flex;
					align-items: center;

					text {
						color: #F56C6C;
						margin-right: 10rpx;
						display: inline-block;
					}

					img {
						width: 42rpx;
						margin-right: 10rpx;
						height: 42rpx;
					}
				}
			}
		}

		.mk {
			color: #E6A23C;
			text-indent: 37rpx;
		}
	}

	.mt {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.mtc {
			display: flex;
			align-items: center;
			color: #2c9b94;
			font-weight: bold;

			&:before {
				content: '';
				width: 8rpx;
				height: 43rpx;
				border-radius: 6rpx;
				background-color: #2c9b94;
				display: inline-block;
				margin-right: 10rpx;
			}
		}

		.mtr {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 5rpx 10rpx;
			border: 1px solid #2c9b94;
			border-radius: 12rpx;
			color: #2c9b94;

			/deep/text {
				display: block;
				margin-right: 10rpx;
				margin-top: 2rpx;
			}
		}
	}


	.muif {
		display: flex;
		align-items: center;
		background-color: #2c9b94;
		border-radius: 12rpx;
		margin-top: 20rpx;
		color: #fff;
		padding: 20rpx;

		.muifi {
			margin-right: 20rpx;
			font-size: 30rpx;

			&:first-of-type {
				font-weight: bold;
			}
		}
	}

	.sub {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.subb {
			background-color: #2c9b94;
			width: 500rpx;
			border-radius: 12rpx;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			margin: 0 auto;
			font-size: 40rpx;
			letter-spacing: 20rpx;
		}

		.subl {
			margin-left: 30rpx;
			font-size: 37rpx;

			text {
				color: #F56C6C;
			}
		}

		/deep/.uv-button-wrapper {
			background-color: #2c9b94;
			height: 100%;
			width: 220rpx;
			display: flex;
			align-items: center;

			button {
				border: 0;
				height: 100%;
				background-color: #2c9b94;
			}
		}
	}
</style>